import { randomUUID } from "@/utils";
import {
  ElInput,
  ElInputNumber,
  ElSelect,
  ElDatePicker,
  ElRadioGroup,
  ElCard,
} from "element-plus";
import { h, resolveComponent } from "vue";

export default {
  input: {
    title: "输入框",
    props: {},
    component: ElInput,
    code(field, globalConfig, helper) {
      return `<el-input ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
  textarea: {
    title: "文本域",
    props: { style: "width:100%", type: "textarea", rows: 4 },
    component: ElInput,
    code(field, globalConfig, helper) {
      return `<el-input ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
  "input-number": {
    title: "数字输入框",
    props: {
      style: "width:100%",
    },
    component: ElInputNumber,
    code(field, globalConfig, helper) {
      return `<el-input-number ${helper.genCompPropStr(
        field,
        globalConfig
      )} />`;
    },
  },
  select: {
    title: "下拉框",
    props: {
      options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
    },
    component: ElSelect,
    code(field, globalConfig, helper) {
      const { options = [], ...props } = field.props;
      return `<el-select style="width:100%" ${helper.genCompPropStr(
        { ...field, props },
        globalConfig
      )}>
          <el-option key='0' value="0">否</el-option>
          <el-option key='1' value="1">是</el-option>
        </el-select>`;
    },
  },
  radio: {
    title: "单选框",
    props: {
      options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
    },
    component: ElRadioGroup,
    code(field, globalConfig, helper) {
      const { options = [], ...props } = field.props;
      const selectOptionsStr = options
        .map((item) => {
          return `<el-radio :label="${item.value}">${item.label}</el-radio>`;
        })
        .join("\r\n");
      return `<el-radio-group ${helper.genCompPropStr(
        { ...field, props },
        globalConfig
      )}>
        ${selectOptionsStr}
        </el-radio-group>`;
    },
  },
  "dict-select": {
    title: "字典下拉框",
    props: {
      dictType: "dict_" + randomUUID(),
    },
    component: {
      setup(props) {
        const ASelect = resolveComponent("el-select");
        const SelectOption = resolveComponent("el-option");
        return () =>
          h(ASelect, {}, [
            h(SelectOption, { label: "字典值1", value: 1, key: 1 }),
            h(SelectOption, { label: "字典值2", value: 2, key: 2 }),
          ]);
      },
    },
    code(field, globalConfig, helper) {
      return `<DictSelect ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
  "date-picker": {
    title: "日期",
    props: { style: "width:100%", valueFormat: "yyyy-MM-dd" },
    component: ElDatePicker,
    code(field, globalConfig, helper) {
      return `<el-date-picker ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
  "date-time-picker": {
    title: "时间",
    props: {
      style: "width:100%",
      type: "datetime",
      valueFormat: "yyyy-MM-dd HH:mm:ss",
    },
    component: ElDatePicker,
    code(field, globalConfig, helper) {
      return `<el-date-time-picker ${helper.genCompPropStr(
        field,
        globalConfig
      )} />`;
    },
  },
  "range-picker": {
    title: "日期范围",
    props: {
      style: "width:100%",
      type: "daterange",
      valueFormat: "yyyy-MM-dd",
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
    },
    component: ElDatePicker,
    code(field, globalConfig, helper) {
      return `<el-date-picker  ${helper.genCompPropStr(
        field,
        globalConfig
      )} />`;
    },
  },
  "range-time-picker": {
    title: "时间范围",
    props: {
      style: "width:100%",
      type: "datetimerange",
      valueFormat: "yyyy-MM-dd HH:mm:ss",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      defaultTime: ["00:00:00", "23:59:59"],
    },
    component: ElDatePicker,
    code(field, globalConfig, helper) {
      return `<el-date-picker ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
  subForm: {
    title: "子表单",
    props: {},
    component: ElCard,
    code(field, globalConfig, helper) {
      return `<el-card  />`;
    },
  },
  "upload-file": {
    title: "附件上传",
    props: {},
    component: {
      setup(props) {
        return () => h("el-button", "上传文件");
      },
    },
    code(field, globalConfig, helper) {
      return `<UploadFile ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
  "preview-media": {
    title: "预览附件",
    props: {},
    component: {
      setup(props) {
        return () => h("span", "预览附件");
      },
    },
    code(field, globalConfig, helper) {
      return `<PreviewMedia ${helper.genCompPropStr(field, globalConfig)} />`;
    },
  },
};
